	<style type="text/css">
	ul.droppable { list-style-type: none; margin: 0; 
					padding: 0; 
					float: left; 
					margin-right: 0px; 
					background: #eee; 
					padding: 0; 
					width: 88%;
					min-height: 40px;
					}
	ul.droppable li{  
					padding: 1mm; 
					font-size: 0.8em; 
					width: 98%;
					list-style-type: none;
					}
	.titulo-coluna{
		width: 25mm;
	}
    #accordion{
    overflow: hidden;
    overflow-y:scroll;
    width: 60mm;    
    max-height: 300px;
    }
    .titulos-miolo{
        min-width: 270mm;
    }
	</style>
	<script type="text/javascript">
	$(function() {
        var icons = {
                header: "ui-icon-circle-arrow-e",
                headerSelected: "ui-icon-circle-arrow-s"
          };
          $("#accordion").accordion({
              event: "mouseover",
              icons:false,
              autoHeight: false,
              navigation: true
          });        
		$(".droppable").sortable({
			connectWith: 'ul',
			placeholder: 'ui-state-highlight',
			cursor: 'move' ,
			forcePlaceholderSize: true,
			forceHelperSize: true,
			tolerance: 'pointer',
			receive: function(event, ui) { 
						//alert('atualiza elemento no db') 
						} 
		});

		$(".droppable").disableSelection();

		$('.mesclar').click(function(o){
				id = this.id.substr(8)
				arr_id = id.split('-')
				span = parseInt($("#"+id).attr('colspan'))
				nx= parseInt(arr_id[3])+parseInt(span)
				idremove='y-'+ arr_id[1]+'-x-'+nx

				span=parseInt(span)+1

				if($('#ul-'+idremove).children().size()>0){
					alert("Coluna com dados")
				}else{
					
					$('#'+idremove).remove()
					$('#'+id).attr('colspan',span);
				}
				
					
			})
		
		$('.dividir').click(function(o){
				id = this.id.substr(8)
				span = $("#"+id).attr('colspan')
				if(parseInt(span)<2){
					alert("nada para dividir")
					return
				}
				arr_id = id.split('-')
				
				span=parseInt(span)-1
				nx= parseInt(arr_id[3])+parseInt(span)
				
				
				idadicionar='y-'+ arr_id[1]+'-x-'+nx

					$('#'+id).attr('colspan',span);
					objeto ="<td id='"+idadicionar+"'><ul class='droppable' style='float: left;' id='ul-"+idadicionar+"'></ul>"
					objeto =objeto + "<div style='width:3px;float:right;'>"
					objeto =objeto + "<span class='ui-icon ui-icon-triangle-1-e mesclar' style='right:-10px' id='mesclar-"+idadicionar+"'></span>"
					objeto =objeto + "</div></td>"
					$('#'+id).after(objeto);
			})





	});
	
	</script>



<div class='titulo-coluna' style='float:left;' id="accordion">
    <?php
        foreach ($this->indicadores as $indicador){
        	$indicador_configuracao = $indicador->findDependentRowset('Model_IndicadoresConfiguracoes')->current();
        	if(!$indicador_configuracao)
        	   continue;
        	$faixas_etarias = $indicador_configuracao->findDependentRowset('Model_FaixaEtaria');
    ?>
	    <h3 style='font-size: 0.7em; margin-left: 0'><a href="#" style='margin-left:4px;padding: 2px;'><?php echo $indicador->num_indicador." - ".$indicador->des_indicador?></a></h3>
	    <div style='overflow: hidden;'>
		    <ul id="ul-indicador-<?php echo $indicador->num_indicador?>" class='droppable' style="min-height: 0">
                <?php foreach ($faixas_etarias as $faixa_etaria){?>
		        <li class="ui-state-default" style='cursor:move' ><?php echo "<span style='font-size:1.3em'><b>".$indicador->num_indicador."</b></span> - ".$faixa_etaria->descritivo?></li>
                <?php }?>
		    </ul>
	    </div>
    <?php }?>
</div>




<table style='border: 1px black thin; float:right; margin-right: 10px;' id='mapa-metabolico'>
	<tr >
		<th rowspan="2" class='titulo-coluna'>Gestante</th>
		<th rowspan="2" class='titulo-coluna'>Menor de 1 ano</th>
		<th rowspan="2" class='titulo-coluna'>de 1 a 5 anos</th>
		<th rowspan="2" class='titulo-coluna'>de 6 a 9 anos</th>
		<th rowspan="2" class='titulo-coluna'>de 10 a 19 anos</th>
		<th colspan="2" class='titulo-coluna'>de 20 a 59 anos</th>
		<th rowspan="2" class='titulo-coluna'>60 anos e mais</th>
	</tr>
	<tr>
		<th class='titulo-coluna'>Feminino</th>
		<th class='titulo-coluna'>Masculino</th>
	</tr>
	<?php
	for ($iy = 0; $iy < $this->linhas; $iy++) {
	?>
		<tr style='height: 30px' >
		<?php 
		for ($ix = 0; $ix < 8; $ix++) {
			if(isset($this->arr[$iy][$ix])){
				$dados =$this->arr[$iy][$ix];
				$dado = '<li class="ui-state-default">'.$dados['desc'].'</li>';
				
			}else{
				$dados = array('desc'=>'','span'=>1 );
				$dado="";
			}
			$coordenada = "y-$iy-x-$ix";
			$ix=$ix+$dados['span']-1;
			
		?>
			<td colspan="<?php echo $dados['span']?>" id='<?php echo $coordenada?>'>
			
			<ul class='droppable' style='float: left;' id='ul-<?php echo $coordenada?>'>
					<?php echo $dado?>
			</ul>
			
				<div style='width:10px;float:right;'>
					<?php if($ix<7){?>
						<span class="ui-icon ui-icon-triangle-1-e mesclar" 
							  style='right:-10px' 
							  id='mesclar-<?php echo $coordenada?>'>
						</span>
					<?php }?>			
					<span class="ui-icon ui-icon-triangle-1-w dividir" 
						  style='right:-10px;cursor:move' 
						  id='mesclar-<?php echo $coordenada?>'>
					</span>
				
				</div>
			
			</td>
		<?php
		} 
		?>
		</tr>
	<?php }?>	
</table>